require("../../both/base.js")
require("./UserVideoTab.scss")

class UserVideoTab extends React.Component {

    constructor(props) {
        super(props);
        this.list_data = [
            {
                title: '评论'
            },
            {
                title: '笔记'
            }];

        this.state = {
            chosen: this.props.chosen
        }
    }

    /**
     *
     * @param key
     * @return {Function}
     */
    chooseActive(key) {
        let self = this;
        let self_key = key;
        /**
         * event {Event}
         */
        return function (event) {
            event.preventDefault();
            self._chooseActive(self_key);
        }
    }

    /**
     *
     * @param self_key
     * @param if_mount
     * @private
     */
    _chooseActive(self_key, if_mount) {
        if (self_key === this.state.chosen && !if_mount) {
            return;
        }
        this.setState({
            chosen: self_key
        }, function () {
            console.log('emit: ', this.state.chosen);
            this.props.emit(this.state.chosen)
        });
    }

    componentDidMount(){

        // choose
        this._chooseActive(0, true)


        // fix when scroll under tab
        var fixDom = document.getElementById("fixed_dom")
        var ulTab = document.getElementById("tab_wr")

        window.document.addEventListener("scroll",function (e){
            var sTop = document.body.scrollTop + document.documentElement.scrollTop
            if(sTop >= fixDom.offsetTop && ! ulTab.className.match(/fixed/gi)){
                ulTab.className += " fixed"
            }else if(sTop < fixDom.offsetTop){
                if(ulTab.className.match(/fixed/gi)){
                    ulTab.className = ulTab.className.replace(/fixed/gi,"").trim()
                }
            }
        })
    }

    render(){
        var self = this

        const lists = self.list_data.map((e,key) => {
            return <li key={key}
                       className={self.state.chosen == key ? "active" : null}
                       onClick={self.chooseActive(key).bind(self)}>
                {e.title}
            </li>
        })

        return <div className="user_video_tab_cr bln" id="user_video_tab_cr">
            <div id="fixed_dom"></div>
            <ul className="tab_wr" id="tab_wr">
                {lists}
            </ul>
        </div>
    }
}

export default UserVideoTab